<template>
	<view class="outerView">
		<uni-section title="">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view class="dropDown">
					<view class="dropDownR">
						<view class="way">维修方式：</view>
						<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"
							style="font-size: 10rpx;"></uni-data-select>
					</view>
					<view>
						<view class="calendar-content" v-if="showCalendar">
							<!-- <view class="example-body hideOnPc">
								<uni-icons class="icon" type="calendar" size="28"></uni-icons>
								<button class="calendar-button" type="button" @click="open">预约日期</button>
							</view> -->
							<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true"
								:insert="info.insert" :startDate="info.startDate" :endDate="info.endDate"
								@confirm="confirm" @close="close" />
						</view>
					</view>
				</view>
				<view v-if="repairList.length > 0">
					<navigator v-for="item in repairList" class="textList" :url="'/pages/my/myMaintain/maintainRecord/maintainRecord?id='+item.id">
						<view class="textOne">
							<view>维修单号</view>
							<view>{{item.id}}</view>
						</view>
						<view class="textOne">
							<view>维修方式</view>
							<view>{{item.type=="0"?"到店维修":"上门取车"}}</view>
						</view>
						<view class="textOne">
							<view>预约日期</view>
							<view>{{item.reservationTime}}</view>
						</view>
					</navigator>
				</view>
				<!-- <view v-if="current === 1">
					<navigator class="textList">
						<view class="textOne">
							<view>维修单号</view>
							<view>3535252</view>
						</view>
						<view class="textOne">
							<view>维修方式</view>
							<view>到店维修</view>
						</view>
						<view class="textOne">
							<view>预约日期</view>
							<view>2022/11/10/11:00</view>
						</view>
					</navigator>
					<navigator class="textList">
						<view class="textOne">
							<view>维修单号</view>
							<view>3535252</view>
						</view>
						<view class="textOne">
							<view>维修方式</view>
							<view>到店维修</view>
						</view>
						<view class="textOne">
							<view>预约日期</view>
							<view>2022/11/10/11:00</view>
						</view>
					</navigator>
				</view> -->
			</view>
		</uni-section>
	</view>
</template>

<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				items: ['进行中', '已完成'],
				current: 0,
				value: 2,
				status:1,
				repairList:[],
				range: [{
						value: 2,
						text: "全部"
					},
					{
						value: 0,
						text: "到店维修"
					},
					{
						value: 1,
						text: "上门取车"
					},
				],

				//日期
				showCalendar: false,
				info: {
					insert: false,
					selected: []
				}
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.date = getDate(new Date(), -30).fullDate
				this.info.startDate = getDate(new Date(), -60).fullDate
				this.info.endDate = getDate(new Date(), 30).fullDate
				this.info.selected = [{
						date: getDate(new Date(), -3).fullDate,
						info: '打卡'
					},
					{
						date: getDate(new Date(), -2).fullDate,
						info: '签到',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: getDate(new Date(), -1).fullDate,
						info: '已打卡'
					}
				]
			}, 2000)
		},
		onLoad() {
				// Fetch the repair data
				this.initData(this.status,this.value)
					// uni.request({
					// 	url: 'http://localhost:9206/repairReservation/listByStatusAndType?status=1',
					// 	method: 'GET',
					// 	header: {
					// 		'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjUwOGY3YWE4LWQ4OWMtNGZiZi1iNDQ1LWZjMDg3ZDQ2YzI2ZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.uJnUOiV9UhrlpUy7fjCgvHQI2oxZUoLGzS16QELxcrf71AjCql_x9ozFLoW5nbh_V_nWPEkU4vZwyS9otCgxPQ'
					// 	},
					// 	success: (res) => {
					// 		this.repairList = res.data;
					// 		console.log(this.repairList)
					// 	}
					// });
				},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current =  e.currentIndex
					this.status=parseInt(e.currentIndex)+1
					this.initData(this.status,this.value)
				}
			},
			pullDownChange(e) {
				console.log("e:", e);
			},
			//日期
			open() {
				this.$refs.calendar.open()
			},
			close() {
				console.log('弹窗关闭');
			},
			change(e) {
				this.initData(this.status,this.value)
				
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			},
			initData(status,type){
				uni.request({
					url: `http://localhost:9206/repairReservation/listByStatusAndType?status=${status}${type!=2?`&type=${type}`:""}`,
					method: 'GET',
					header: {
						'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImI0OWU4NmFkLTZhNTMtNGQyNS1iNzFkLTQ1NjBiOTE2ZTFhNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.PHw5Ez00yg0Vk_Wx4zO3rnSUHe2znWiWOK2IhwFS80dqK02znBtDbe7GfAiuT3YOQSsnBdIi0O7fjprpExMxlg'
					},
					success: (res) => {
						this.repairList = res.data;
						console.log(this.repairList)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.outerView {}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-common-mt {
		margin-top: -15px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 107px 10px;
	}

	//维修方式
	.way {
		line-height: 90rpx;
	}
	//图标
	.icon{
		line-height: 90rpx;
	}

	// 下拉框样式
	.dropDown {
		height: 70rpx;
		width: 710rpx;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		text-align: center;
		line-height: 90rpx;
	}

	.dropDownR {
		width: 360rpx;
		display: flex;
	}

	//列表样式
	.textList {
		padding: 10rpx 40rpx;
		border-bottom: 1px solid rgba(206, 206, 206, 0.81);
	}

	.textOne {
		display: flex;
	}

	.textOne view {
		padding: 5rpx 50rpx;
	}

	//日期样式
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-size: 14px;
		background-color: #fff;
	}
</style>

<style scoped>
	/deep/ .uni-select[data-v-6b64008e] {
		font-size: 14px;
		border: 0px solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0 20px;
		padding-left: 0px;
		position: relative;
		display: flex;
		-webkit-user-select: none;
		user-select: none;
		flex-direction: row;
		align-items: center;
		border-bottom: solid 0px #e5e5e5;
		width: 100%;
		flex: 1;
		height: 35px;
	}
</style>


<!--日期外部 -->
<style scoped>
	/deep/ .calendar-button[data-v-18bce265] {
		line-height: 45px;
	}
</style>


<style scoped>
	/deep/ uni-button:after {
		border: 0px solid #fff;
	}
</style>

<!--日期内部 -->
<style scoped>
	/deep/ .dropDown[data-v-18bce265] {
		line-height: 20px;
	}
</style>
